We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Breadcrumbs

Example is seen at the top of this page, just under the masthead.

HTML

<nav id="breadcrumb-nav" class="breadcrumb-nav">
    <ol id="breadcrumb" class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Research & Analysis</a></li>
        <li><a href="#">Enterprising Investor</a></li>
        <li class="current-page">Opportunity Cost of Screening in Socially Responsible Investing</li>
    </ol>
</nav>

Problem Being Solved

We need a way to provide context within the site's navigation hierarchy.

When to Use

Breadcrumbs should appear on every page at and below the L3 level.

When Not to Use

We do not show the breadcrumb on the home page or on L2 pages.

Formatting

  • This code should be placed just inside the <main> content element.
  • Every page but the current page is linked.
  • Truncate after the first five words of a page title.